import 'dart:ui';

import 'package:cotton_candy/notifier/tab_notifier.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class BottomTabBar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BottomTabBarState();
  }
}

class _BottomTabBarState extends State {
  double circular = 34;
  @override
  Widget build(BuildContext context) {
    TabNotifier tabNotifier = context.watch();
    return Container(
      height: 70,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(circular),
          topRight: Radius.circular(circular),
        ),
        boxShadow: [
          BoxShadow(
              blurRadius: 8,
              color: Color.fromARGB(15, 0, 0, 0),
              offset: Offset(0, -1))
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(circular),
          topRight: Radius.circular(circular),
        ),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Container(
            padding: EdgeInsets.only(bottom: 10),
            color: Color.fromARGB(150, 255, 255, 255),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _TabButton(
                  onTap: () {
                    context.read<TabNotifier>().changePage(0);
                  },
                  icon: Icon(
                    tabNotifier.page == 0
                        ? CupertinoIcons.chat_bubble_2_fill
                        : CupertinoIcons.chat_bubble_2,
                    size: 24,
                  ),
                  isActive: tabNotifier.page == 0,
                ),
                _TabButton(
                  onTap: () {
                    context.read<TabNotifier>().changePage(1);
                  },
                  icon: Icon(
                    tabNotifier.page == 1
                        ? CupertinoIcons.person_2_fill
                        : CupertinoIcons.person_2,
                    size: 24,
                  ),
                  isActive: tabNotifier.page == 1,
                ),
                _TabButton(
                  onTap: () {
                    context.read<TabNotifier>().changePage(2);
                  },
                  icon: Icon(
                    tabNotifier.page == 2
                        ? CupertinoIcons.gift_alt_fill
                        : CupertinoIcons.gift_alt,
                    size: 24,
                  ),
                  isActive: tabNotifier.page == 2,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class _TabButton extends StatefulWidget {
  final Function onTap;
  final Icon icon;
  final bool isActive;
  _TabButton({Key key, this.onTap, this.icon, this.isActive}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return _TabButtonState();
  }
}

class _TabButtonState extends State<_TabButton>
    with SingleTickerProviderStateMixin {
  double _scale = 1.0;

  AnimationController _controller;

  void _handlePointerDown(_) {
    _controller.reverse(from: 1);
  }

  void _handlePinterUp(_) {
    _controller.forward(from: 0);
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 50),
      vsync: this,
    )..addListener(() {
        setState(() {
          _scale = 0.8 + _controller.value * 0.2;
        });
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double size = widget.icon.size == null ? 18 : widget.icon.size;
    return Listener(
      onPointerDown: _handlePointerDown,
      onPointerUp: _handlePinterUp,
      onPointerCancel: _handlePinterUp,
      child: MaterialButton(
        splashColor: Color.fromARGB(20, 0, 0, 0),
        shape: CircleBorder(
            side: BorderSide(
          color: Color.fromARGB(0, 0, 0, 0),
          style: BorderStyle.solid,
        )),
        height: 40,
        child: Icon(
          widget.icon.icon,
          color: widget.isActive
              ? Color.fromARGB(180, 251, 159, 63)
              : Color.fromARGB(100, 0, 0, 0),
          size: size * _scale,
        ),
        onPressed: widget.onTap,
      ),
    );
  }
}
